class CommQuery extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            comms: [''],
            searchCommState: "",
            commViewing : {commInfo : {}}
        };

        this.pageCount = 0;
        this.commStateMap = {
            test : '测试状态',
            deploy : '部署状态',
            operate : '运营状态'
        }

    }

    componentDidMount() {
        this.updateCommList(1, 10);
    }

    /* custom functions */
    updateCommList(page, pageSize) {
        let params = {};
        params.page = page;
        params.pageSize = pageSize;
        params.commState = this.refs.commSelect.value;
        let regex = /^[0-9a-zA-Z]{4}$/;
        if (regex.test(this.refs.commCode.value))
            params.commCode = this.refs.commCode.value;
        else
            params.commName = this.refs.commCode.value;
        postJson("/comm/findCommListPage.x", params, (data) => {
            this.pageCount = data.size;
            this.setState({
                comms: data.list
            });
        })
    }

    search() {
        this.updateCommList(1, 10);
    }

    viewComm(commCode) {
        let params = {
            commInfo : commCode,
            localServer : commCode
        }
        postJson("/comm/getCommInfo.x",params,(data)=>{
            this.setState({commViewing : data.data});
            this.refs.commDetailModal.show();
        });

    }

    modify(commCode) {
        document.location.href = '/pages/business/commDim/forSave.html?commCode=' + commCode;
    }

    createComm(){
        document.location.href = '/pages/business/commDim/forSave.html';
    }

    delete(commCode) {
        layui.layer.confirm('确定要删除该小区么?删除之后楼栋信息都会被删除,除了用户数据!', (index) => {
            let params = {};
            params.commCode = '' + commCode;
            postJson("/comm/remove.x", $.param(params), () => {
                this.refs.table.refresh();
                layui.layer.msg("小区删除成功!");
            })
            layui.layer.close(index);
        });

    }

    construct(commCode) {
        document.location.href = '/AreaCtrl/genArea.x?commCode=' + commCode;
    }

    /* custom end */

    render() {

        return (
            <Frame header="小区信息管理" headerBtns={
                <SecurityCheck perms="comm:create">
                    <HeaderBtn onClick={()=>this.createComm()}><i className="fa fa-plus"></i>&nbsp;创建小区</HeaderBtn>
                </SecurityCheck>
            }
            >
                <Form type="pane">
                    <Item>
                        <Label width="lg">小区名称或编号</Label>
                        <Input name="strCommName" ref="commCode" btnType="normal"/>

                        <Label>小区状态：</Label>
                        <Select name="commState" ref="commSelect">
                            <option value="">请选择小区状态</option>
                            <option value="test">测试状态</option>
                            <option value="deploy">部署状态
                            </option>
                            <option value="operate">运营状态
                            </option>
                        </Select>

                        <Button btnType="normal" onClick={() => this.search()}>查询</Button>
                    </Item>
                    <Table ref="table" count={this.pageCount}
                           pageOnClick={(page, pageSize) => this.updateCommList(page, pageSize)}>
                        <thead>
                        <tr>
                            <th>小区编号</th>
                            <th>小区名称</th>
                            <th>所在城市</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {

                            this.state.comms.map((comm) => {
                                return <tr>
                                    <td>{comm.comm_code}</td>
                                    <td>{comm.comm_name}</td>
                                    <td>{comm.comm_city}</td>
                                    <td>{comm.create_time}</td>
                                    <td>
                                        <Button size="xs" onClick={() => this.viewComm(comm.comm_code)}>查看</Button>

                                        <SecurityCheck roles="admin">
                                            <Button btnType="normal" size="xs" onClick={() => this.modify(comm.comm_code)}>修改</Button>
                                        </SecurityCheck>

                                        <SecurityCheck roles="admin">
                                            <Button btnType="danger" size="xs" onClick={() => this.delete(comm.comm_code)}>删除</Button>
                                        </SecurityCheck>

                                        <SecurityCheck roles="admin">
                                            <Button btnType="normal" size="xs" onClick={() => this.construct(comm.comm_code)}>栋数单元生成</Button>
                                        </SecurityCheck>
                                    </td>
                                </tr>
                            })
                        }
                        </tbody>
                    </Table>
                    <style>
                        {
                            `
                            .left-td{
                                width:150px;
                                background-color:#F8F8F8;
                            }
                            `
                        }
                    </style>
                    <Modal title="小区详情" ref="commDetailModal" area={['800px']}>
                        <Table size="sm" wordWrap="breakWord">
                            <colgroup>
                                <col className="left-td"/>
                                <col/>
                                <col className="left-td"/>
                                <col/>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>小区编号</td>
                                    <td>{this.state.commViewing.commInfo.commCode}</td>
                                    <td>小区名称</td>
                                    <td>{this.state.commViewing.commInfo.commName}</td>
                                </tr>
                                <tr>
                                    <td>创建时间</td>
                                    <td>{this.state.commViewing.commInfo.createTime}</td>
                                    <td>所在城市：</td>
                                    <td>{this.state.commViewing.commInfo.city}</td>
                                </tr>
                                <tr>
                                    <td>小区状态：</td>
                                    <td>{this.commStateMap[this.state.commViewing.commInfo.commState]}</td>
                                    <td>小区梯口机密码：</td>
                                    <td>{this.state.commViewing.commInfo.commPassword}</td>
                                </tr>
                                <tr>
                                    <td>围墙机数量：</td>
                                    <td>{this.state.commViewing.commInfo.gateDevNum}</td>
                                    <td>管理机数量：</td>
                                    <td>{this.state.commViewing.commInfo.manageDevNum}</td>
                                </tr>
                                <tr>
                                    <td>本地服务器：</td>
                                    <td>{this.state.commViewing.localServer?'有':'无'}</td>
                                    <td>语音网关：</td>
                                    <td>{this.state.commViewing.commInfo.pstnComm?'绑定在小区['+this.state.commViewing.commInfo.pstnComm+']':'无'}</td>
                                </tr>
                                <tr>
                                    <td>小区版本:</td>
                                    <td>{this.state.commViewing.commInfo.commSoftVersion}</td>
                                    <td>小区详情：</td>
                                    <td>{this.state.commViewing.commInfo.commAdds}</td>
                                </tr>
                            </tbody>
                        </Table>
                    </Modal>
                </Form>
            </Frame>
        )
    }
};

ReactDOM.render(<CommQuery/>, document.getElementById('query'));
